<template>
  <div class="app-container">
    <div class="head">
      <div :class="['list', current == item.id ? 'active' : '']" v-for="(item,index) in navList" :key="index" @click="handleNav(item.id)">
        <div class="txt">{{item.value}}</div>
      </div>
    </div>
    <div class="main">
      <information :id="id" v-if="current == 1"></information>
      <shenye :id="id" v-if="current == 2"></shenye>
      <kyy :id="id" v-if="current == 3"></kyy>
    </div>
  </div>
</template>

<script>
import information from "./membersDetail/information.vue";
import shenye from "./membersDetail/shenye.vue";
import kyy from "./membersDetail/kyy.vue";

export default {
  name: "Customer",
  components: {
    information ,
    shenye,
    kyy,
  },
  data() {
    return {
      id: '',
      current: 1,
      navList: [
        {id: 1,value: '基本信息'},
        {id: 2,value: '神椰板块'},
        {id: 3,value: '卡优优板块'},
      ],
    };
  },
  computed: {
    
  },
  created() {
    this.id = this.$route.query.id
    console.log('id',this.id)
  },
  methods: {
    /* 切换选项 */
    handleNav(id){
      this.current = id
    },
    //coin详情
    handleCoin(row) {
      this.$router.push({
        path: "/members/coin-detail",
        query: {
          id: row.id,
        },
      })
    },
  
  }
};

</script>
<style lang="scss" scoped>
.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 20px 0;
}
.head{
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  .list{
    padding: 0 50px;
    .txt{
      font-size: 20px;
      color: #222;
      padding-bottom: 18px;
    }
  }
  .active{
    
    .txt{
      font-size: 20px;
      color: #1890ff;
      font-weight: 600;
      padding-bottom: 14px;
      border-bottom: 4px solid #1890ff;

    }
  }
}
.main{
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  margin-top: 20px;
}
</style>
